<!DOCTYPE html>
<html lang="en">
    
    <head>
        <title>Gallery - Gallery Page | Tut-Tutoring</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/style.css" type="text/css" media="all">
        <link rel="stylesheet" href="css/colorbox.css" />
        <link href="js/skin/pink.flag/jplayer.pink.flag.css" rel="stylesheet"
        type="text/css" />
        <script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="js/cufon-yui.js"></script>
        <script type="text/javascript" src="js/Humanst521_BT_400.font.js"></script>
        <script type="text/javascript" src="js/Humanst521_Lt_BT_400.font.js"></script>
        <script type="text/javascript" src="js/cufon-replace.js"></script>
        <script type="text/javascript" src="js/roundabout.js"></script>
        <script type="text/javascript" src="js/roundabout_shapes.js"></script>
        <script type="text/javascript" src="js/gallery_init.js"></script>
        <script type="text/javascript" src="js/loopedslider.min.js"></script>
        <script type="text/javascript" src="js/jquery.colorbox.js"></script>
        <script type="text/javascript" src="js/jquery.jplayer.min.js"></script>
        <script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
        <script>
            $(document).ready(function () {

                $(".inline").colorbox({
                    inline: true,
                    width: "50%"
                });
                $(".callbacks").colorbox({
                    onOpen: function () {
                        alert('onOpen: colorbox is about to open');
                    },
                    onLoad: function () {
                        alert('onLoad: colorbox has started to load the targeted content');
                    },
                    onComplete: function () {
                        alert('onComplete: colorbox has displayed the loaded content');
                    },
                    onCleanup: function () {
                        alert('onCleanup: colorbox has begun the close process');
                    },
                    onClosed: function () {
                        alert('onClosed: colorbox has completely closed');
                    }
                });

                //Example of preserving a JavaScript event for inline calls.
                $("#click").click(function () {
                    $('#click').css({
                        "background-color": "#f00",
                        "color": "#fff",
                        "cursor": "inherit"
                    }).text("Open this window again and this message will still be here.");
                    return false;
                });
            });
        </script>
        <script type="text/javascript">
            $(function () {
                // Option set as a global variable
                $('#loopedSlider').loopedSlider({
                    container: ".wrap",
                    containerClick: false
                });
            });
        </script>
        <script type="text/javascript">
            //<![CDATA[
            $(document).ready(function () {

                $("#jquery_jplayer_1").jPlayer({
                    ready: function (event) {
                        $(this).jPlayer("setMedia", {
                            m4a: "http://www.jplayer.org/audio/m4a/TSP-01-Cro_magnon_man.m4a",
                            oga: "http://www.jplayer.org/audio/ogg/TSP-01-Cro_magnon_man.ogg",
                            mp3: "http://www.jplayer.org/audio/mp3/TSP-07-Cybersonnet.mp3",

                        });
                    },
                    swfPath: "js",
                    supplied: "m4a, oga, mp3",
                    wmode: "window"
                });
            });
            //]]>
        </script>
        <!--[if lt IE 7]>
            <link rel="stylesheet" href="css/ie/ie6.css" type="text/css" media="all">
        <![endif]-->
        <!--[if lt IE 9]>
            <script type="text/javascript" src="js/html5.js"></script>
            <script type="text/javascript" src="js/IE9.js"></script>
        <![endif]-->
    </head>
    
    <body>
        <!-- header -->
        <header>
            <div class="container">
                <h1>
                    <a href="index.html">Tut-Tutoring</a>
                </h1>
                <nav>
                    <ul>
                        <li>
                            <a href="index.html">Home</a>
                        </li>
                        <li>
                            <a href="lesson.html">Lesson</a>
                        </li>
                        <li>
                            <a href="gallery.html" class="current">Gallery</a>
                        </li>
                        <li>
                            <a <a class='inline' href="#inline_content">Edit Details</a>
                        </li>
                        <li>
                            <a href="">Logout</a>
                        </li>
                    </ul>
                </nav>
            </div>
        </header>
        <!-- #gallery -->
        <section id="gallery">
            <div class="container">
                <div class="inside">
                    <div class='menu_gal'>
                        <ul>
                            <li>
                                <a href='http://www.onlineaspect.com'>My blog</a>
                            </li>
                            <li>
                                <a href='#'>My profiles</a>
                                <ul>
                                    <li>
                                        <a href='http://www.facebook.com/joshfraser'>Facebook</a>
                                    </li>
                                    <li>
                                        <a href='http://www.linkedin.com/in/joshuafraser'>LinkedIn</a>
                                    </li>
                                    <li>
                                        <a href='http://www.twitter.com/joshfraser'>Twitter</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </div>
					<div class="content_list_gal">
					                        <ul>
                            <li>
                                <a href='http://www.onlineaspect.com'>My blog</a>
                            </li>
                            <li>
                                <a href='#'>My profiles</a>
                                <ul>
                                    <li>
                                        <a href='http://www.facebook.com/joshfraser'>Facebook</a>
                                    </li>
                                    <li>
                                        <a href='http://www.linkedin.com/in/joshuafraser'>LinkedIn</a>
                                    </li>
                                    <li>
                                        <a href='http://www.twitter.com/joshfraser'>Twitter</a>
                                    </li>
                                </ul>
                            </li>
                        </ul>
					</div>
                    <div class="mp3">
                        <div id="jquery_jplayer_1" class="jp-jplayer"></div>
                        <div id="jp_container_1" class="jp-audio">
                            <div class="jp-type-single">
                                <div class="jp-gui jp-interface">
                                    <ul class="jp-controls">
                                        <li>
                                            <a href="javascript:;" class="jp-play" tabindex="1">play</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="jp-pause" tabindex="1">pause</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="jp-stop" tabindex="1">stop</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a>
                                        </li>
                                    </ul>
                                    <div class="jp-progress">
                                        <div class="jp-seek-bar">
                                            <div class="jp-play-bar"></div>
                                        </div>
                                    </div>
                                    <div class="jp-volume-bar">
                                        <div class="jp-volume-bar-value"></div>
                                    </div>
                                    <div class="jp-current-time"></div>
                                    <div class="jp-duration"></div>
                                    <ul class="jp-toggles">
                                        <li>
                                            <a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a>
                                        </li>
                                        <li>
                                            <a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="jp-title">
                                    <ul>
                                        <li>title</li>
                                    </ul>
                                </div>
                                <div class="jp-no-solution">
                                    <span>Update Required</span>To play the media you will need to either update
                                    your browser to a recent version or update your
                                    <a href="http://get.adobe.com/flashplayer/"
                                    target="_blank">Flash plugin</a>.</div>
                            </div>
                        </div>
                    </div>
                </div>
        </section>
        <!-- /#gallery -->
        <div class="main-box">
            <div class="container">
                <div class="inside">
                    <div class="wrapper">
                        <!-- aside -->
                        <aside>
                            <h2>Song
                                <span>Details</span>
                            </h2>
                            <!-- .contacts -->
                            <ul class="contacts">
                                <li>
                                    <strong>Title:</strong>song name</li>
                                <li>
                                    <strong>Uploader:</strong>username</li>
                                <li>
                                    <strong>Date</strong>upload date</li>
                            </ul>
                            <!-- /.contacts -->
                            <h3>Details:</h3>Uploaders comments will go here</aside>
                        <!-- content -->
                        <section id="content">
                            <article>
                                <h2>Leave a
                                    <span>Comment</span>
                                </h2>
                                <form id="contacts-form" action="" method="post">
                                    <fieldset>
                                        <div class="field">
                                            <label>Your Name:</label>
                                            <div class="fright">18/04/12 - 19:00</div>
                                        </div>
                                        <div class="field">
                                            <label>Your Message:</label>
                                            <textarea></textarea>
                                        </div>
                                        <div>
                                            <a href="#" onclick="document.getElementById('contacts-form').submit()">Send Your Message!</a>
                                        </div>
                                    </fieldset>
                                </form>
                            </article>
                        </section>
                    </div>
                </div>
            </div>
        </div>
        </div>
        <!-- This contains the hidden content for inline calls -->
        <div style='display:none'>
            <div class="img_modal" id='inline_content' style='padding:10px;'>
                <h2>Edit Details</h2>
                <ul>
                    <li>
                        <input style="padding-bottom:5px" value="" id="user_login" name="user[login]"
                        placeholder="username" size="30" type="text" required>
                    </li>
                    <li>
                        <input value="" id="user_login" name="user[login]" placeholder="password"
                        size="30" type="text" required>
                    </li>
                    <li class="button">
                        <input type="hidden" name="option" value="login" />
                        <input class="button_save" name="commit" value="Save" type="submit">
                    </li>
                </ul>
            </div>
        </div>
        <!-- footer -->
        <footer>
            <div class="container">
                <div class="wrapper">
                    <div class="fleft">Copyright - Tut-Tutoring</div>
                    <div class="fright"></div>
                </div>
            </div>
        </footer>
        <script type="text/javascript">
            Cufon.now();
        </script>
    </body>

</html>